<template>
  <div class="action-items-wrapper">
    <!-- <span class="action-item coming-soon"> SAAS系统正在开发建设当中...，还不能作为生产环境使用 </span> -->
    <!-- <span class="action-item coming-soon"> 新版ERP系统内测中 </span> -->

    <!-- <span v-if="appStore.actionBar.isShowSearch" class="action-item" @click="onShowSearch">
      <SearchIcon />
    </span> -->
    <span class="action-item" @click="onShowSearch">
      <a-popover position="top" popup-container="body" :width="300">
        <CopyText :val="loginUrl">
          <template #copyCon>
            <icon-link />
          </template>
        </CopyText>
        <template #content>
          <p>复制专属登录页</p>
        </template>
      </a-popover>
    </span>
    <span v-if="appStore.actionBar.isShowRefresh" class="action-item" @click="onRefrehRoute">
      <RefreshIcon />
    </span>
    <span v-if="appStore.actionBar.isShowFullScreen && appStore.deviceType !== 'mobile'" class="action-item" @click="onScreenFull">
      <ExpandIcon />
    </span>
    <span class="action-item">
      <a-popover position="top" popup-container="body" :width="300">
        <icon-download @click="toDownload('/system/download/download')" />
        <template #content>
          <p>下载中心</p>
        </template>
      </a-popover>
    </span>
    <span class="action-item" @click="onShowSetting">
      <SettingIcon />
    </span>
    <!-- <span class="action-item">
      <a-dropdown @select="handleSelect">
        <span style="font-size: .875rem">{{ langText }}</span>
        <template #content>
          <a-doption value="zh">中文</a-doption>
          <a-doption value="en">English</a-doption>
          <a-doption value="ind">Indonesian</a-doption>
        </template>
      </a-dropdown>
    </span> -->
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { useRoute, useRouter } from 'vue-router'
  import { IconSettings as SettingIcon, IconSearch as SearchIcon, IconFullscreen as ExpandIcon, IconRefresh as RefreshIcon } from '@arco-design/web-vue/es/icon'
  import { useDebounceFn, useFullscreen } from '@vueuse/core'
  import useEmit from '@/hooks/useEmit'
  import useAppConfigStore from '@/store/modules/app-config'
  import useUserStore from '@/store/modules/user'
  // import WalletIcon from '@/views/finance/wallet/component/WalletIcon.vue'
  import { useI18n } from 'vue-i18n'
  export default defineComponent({
    name: 'ActionItems',
    components: {
      SearchIcon,
      SettingIcon,
      ExpandIcon,
      RefreshIcon,
      // WalletIcon,
    },
    setup() {
      const showSearchContent = ref(false)
      const searchContent = ref('')
      const settingRef = ref()
      const badgeValue = ref(3)
      const appStore = useAppConfigStore()
      const router = useRouter()
      const route = useRoute()
      const emitter = useEmit()
      function onShowSearch() {
        emitter?.emit('show-search')
      }
      const { isSupported, enter, isFullscreen, exit } = useFullscreen(document.documentElement)
      const { locale } = useI18n()
      const langText = ref<string>('语言')
      const userInfoStore = useUserStore()
      const loginUrl = `${window.location.origin}/#/login?id=${userInfoStore.companyId}`
      const walletIconDialog = ref()
      function onOpenWallet() {
        walletIconDialog.value.open()
      }

      function onScreenFull() {
        if (!isSupported) {
          Message.error('当前浏览器不支持全屏操作')
          return false
        }
        if (isFullscreen.value) {
          exit()
        } else {
          enter()
        }
      }
      const debouncedFn = useDebounceFn(() => {
        router.replace({ path: '/redirect' + route.path, query: route.query })
      }, 200)
      function onRefrehRoute() {
        debouncedFn()
      }
      function onShowSetting() {
        emitter?.emit('show-setting')
      }

      function handleSelect(value: any) {
        locale.value = value
        userInfoStore.setLang(value)
        localStorage.setItem('lang', value)
        setLangText()
      }

      function setLangText() {
        const textType = localStorage.getItem('lang')
        switch (textType) {
          case 'zh':
            langText.value = '语言'
            break
          case 'en':
            langText.value = 'language'
            break
          case 'ind':
            langText.value = 'bahasa'
            break
          default:
            langText.value = '语言'
            break
        }
      }

      const toDownload = (url: string) => {
        router.push(url)
      }

      setLangText()

      return {
        settingRef,
        showSearchContent,
        searchContent,
        badgeValue,
        appStore,
        onShowSearch,
        onScreenFull,
        onRefrehRoute,
        onShowSetting,
        handleSelect,
        langText,
        onOpenWallet,
        walletIconDialog,
        toDownload,
        loginUrl,
      }
    },
  })
</script>

<style lang="less" scoped>
  .action-items-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 1;
    .action-item {
      min-width: 2.125rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.125rem;
      height: 100%;
      &:hover {
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.04);
      }
      :deep(.arco-badge-number, .arco-badge-dot, .arco-badge-text, .arco-badge-custom-dot) {
        transform: translate(10%, 20%);
      }
    }
  }
  .coming-soon {
    color: red !important;
    margin-right: 3.125rem;
  }
</style>
